<!-- 订单详情 -->
<template>
	<view class="olderDetail">
		<view class="headerBox"></view>
		<view class="nav_bar" :class="{'nav_bar_bg':isSticky}" :style="{paddingTop:statusBar+'px',height:customBar+'px'}">
			<view class="left" @click="backIcon">
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view class="navTiele">订单详情</view>
		</view>
		
		<view class="mt135">
			

		<view class="typeBox" v-if="orderInfo.status != 2">
			<view class="stepBox">
				<view class="stepItem" v-for="(sa,idx) in stepList" :key="idx">
					<view class="imgBox" :class="{'imgBoxActive':stepIndex == idx}">
						<image :src="sa.status0" v-if="stepIndex == idx" mode="widthFix" class="stepImg"></image>
						<image :src="sa.status1" v-else mode="widthFix" class="stepImg"></image>
					</view>
					<view class="stepTxt" :class="{'active':stepIndex == idx}">{{sa.name}}</view>
					<text class="iconfont icon-xiangyou stepRight" v-if="idx != 4"></text>
				</view>
			</view>
		</view>

		<view class="redTxt topTips" v-if="stepIndex == 0">
			订单审核中，请耐心等待工作人员致电确认
		</view>

		<view class="typeBox">
			<view class="title">{{ ['','黄金','白银','铂金','钯金'][orderInfo.type] }}旧料</view>
			<!-- 定价回收 -->
			<block v-if="orderInfo.order_type == 1">
				<view class="infoItem" v-if="stepIndex < 4">
					<view class="name">预计克重</view>
					<view class="num">{{orderInfo.weight}}g</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">来料克重</view>
					<view class="num">{{orderInfo.weight2}}g</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">熔后克重</view>
					<view class="num">{{orderInfo.quality_weight}}g</view>
				</view>
				<view class="infoItem" v-if="orderInfo.status == 5">
					<view class="name">实际成色</view>
					<view class="num">{{orderInfo.fineness}}%</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">结算克重</view>
					<view class="num">{{orderInfo.actual_weight}}g</view>
				</view>
				<view class="infoItem">
					<view class="name">预计金价</view>
					<view class="num">{{orderInfo.recycle_price}}/g</view>
				</view>
				<view class="infoItem" v-if="orderInfo.status != 5">
					<view class="name">预估价格</view>
					<view class="num">￥{{orderInfo.predict_price}}</view>
				</view>
				
				<view class="infoItem">
					<view class="name">商品总价</view>
					<view class="num">￥{{orderInfo.reckoning_price}}</view>
				</view>
				
				<view class="infoItem" v-if="orderInfo.status == 5">
					<view class="name">成色检测</view>
					<view class="num">
						<image :src="url" v-for="(url, i) in goods_img" :key="i" mode="widthFix" class="imgList" @click="imgPreViewGoods(i)">
						</image>
					</view>
				</view>
				
				<view class="infoItem">
					<view class="name">邮寄单号</view>
					<view class="num">{{orderInfo.ctn_no || '-'}}</view>
				</view>
			</block>
			<!-- 来料待结 -->
			<block v-if="orderInfo.order_type == 2">
				
				<view class="infoItem" v-if="stepIndex < 4">
					<view class="name">预计克重</view>
					<view class="num">{{orderInfo.weight}}g</view>
				</view>
				
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">来料克重</view>
					<view class="num">{{orderInfo.weight2}}g</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">熔后克重</view>
					<view class="num">{{orderInfo.quality_weight}}g</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">实际成色</view>
					<view class="num">{{orderInfo.fineness}}%</view>
				</view>
				
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">结算克重</view>
					<view class="num">{{orderInfo.actual_weight}}g</view>
				</view>
				
				<view class="infoItem" v-if="stepIndex == 3 || stepIndex == 4">
					<view class="name">成色检测</view>
					<view class="num">
						<image :src="url" v-for="(url, i) in goods_img" :key="i" mode="widthFix" class="imgList" @click="imgPreViewGoods(i)">
						</image>
					</view>
				</view>
				
				<view class="infoItem" v-if="stepIndex > 0">
					<view class="name">邮寄单号</view>
					<view class="num">{{orderInfo.ctn_no || '-'}}</view>
				</view>
			</block>
			
		</view>
		</view>

		<view class="typeBox" v-if="stepIndex == 1">
			<view class="title">
				物流信息
			</view>
			<ExpressDeliveryTrajectory :list="logistics" v-if="logistics.length > 0"></ExpressDeliveryTrajectory>
		</view>



		<view class="typeBox" v-if="stepIndex == 4 && !isExtract">
			<view class="title">结算账户</view>
			<view class="infoItem">
				<view class="name flex_j" style="width: 100%;">
					<image v-if="extract_info.extract_type == 'alipay'" src="@/static/imgs/pay01.png" mode="widthFix"
						style="width: 47rpx; margin-right: 20rpx;"></image>
					<image v-else src="@/static/imgs/pay02.png" mode="widthFix" style="width: 47rpx; margin-right: 20rpx;">
					</image>
					{{extract_info.extract_type == 'alipay' ? extract_info.alipay_code : extract_info.bank_code}}
				</view>
			</view>
			<view class="infoItem">
				<view class="name">打款凭证</view>
				<view class="num" v-if="extract_info.extract_type == 'alipay'">
					{{extract_info.alipay_log || '-'}}
				</view>
				<view class="num" v-else>
					{{extract_info.voucher || '-'}}
					<image :src="extract_info.voucher" mode="widthFix" class="imgList" @click="imgPreView(extract_info.voucher)">
					</image>
				</view>
			</view>
			<image v-if="extract_info.status == 1" src="@/static/imgs/payIcon.png" mode="widthFix" class="payImg"></image>
		</view>

		<view class="typeBox" v-if="stepIndex == 4 || stepIndex == 0">
			<view class="title">订单信息 </view>
			<view class="infoItem">
				<view class="name">订单号</view>
				<view class="num">{{orderInfo.order_sn}}</view>
			</view>
			<view class="infoItem">
				<view class="name">定价方式</view>
				<view class="num">{{orderInfo.order_type == 1 ? '定价回收' : '来料待结'}}</view>
			</view>
			<view class="infoItem" v-if="orderInfo.order_type == 1">
				<view class="name">预付定金</view>
				<view class="num">￥{{orderInfo.deposit}}</view>
			</view>
			<view class="infoItem">
				<view class="name">快递保费</view>
				<view class="num">￥{{orderInfo.insured}}</view>
			</view>
			
			<block v-if="orderInfo.status == 2">
				<view class="infoItem">
					<view class="name">订单备注</view>
					<view class="num">{{orderInfo.remark}}</view>
				</view>
			</block>
			
			<block v-else>
				<view class="infoItem">
					<view class="name">下单时间</view>
					<view class="num">{{ orderInfo.add_time | formatTimestamp}}</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 4">
					<view class="name">审核时间</view>
					<view class="num">{{ orderInfo.confirm_time | formatTimestamp}}</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 4">
					<view class="name">寄出时间</view>
					<view class="num">{{ orderInfo.mailing_time | formatTimestamp}}</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 4">
					<view class="name">检测时间</view>
					<view class="num">{{ orderInfo.check_time | formatTimestamp}}</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 4">
					<view class="name">确认时间</view>
					<view class="num">{{ orderInfo.confirm_price_time | formatTimestamp}}</view>
				</view>
				<view class="infoItem" v-if="stepIndex == 4 && orderInfo.order_type == 1">
					<view class="name">账户到账</view>
					<view class="num">{{ orderInfo.confirm_price_time | formatTimestamp}}</view>
				</view>
			</block>

		</view>

		<view class="floor">
			<!-- <view class="left" v-if="stepIndex == 0 || stepIndex == 1"></view> -->
			<!-- <view class="btn" v-if="stepIndex == 0 || stepIndex == 1 || stepIndex == 3" @tap="wxService">联系客服</view> -->
			<view class="btn sellBtn" @tap="expressOpen" v-if="stepIndex == 3">{{opType == 1 ? '确认卖出' : '确认入库'}}</view>
		</view>

		<uni-popup ref="expressPopup" border-radius="20rpx 20rpx 0 0">
			<view class="popContent">
				<view class="title">选择账户入账</view>

				<view class="bankTitle">收款方式</view>

				<view class="flex_sbs " style="padding: 0 37rpx;">
					<view class="bankCard flex" :class="{'bankActive':payTypeIndex === 1}" @tap="payTypeChange(1)">
						<image src="@/static/imgs/pay01.png" class="payBankImg"></image>
						<view class="name">
							支付宝
							<view class="greyTxt">秒到账，提现免费</view>
						</view>
					</view>

					<!-- <view class="bankCard flex" :class="{'bankActive':payTypeIndex === 0}" @tap="payTypeChange(0)">
						<image src="@/static/imgs/pay02.png" class="payBankImg"></image>
						<view class="name">
							银行卡
							<view class="greyTxt">2个工作日内打款</view>
						</view>
					</view> -->
					<view class="bankCard flex" :class="{'bankActive':payTypeIndex === 2}" @tap="payTypeChange(2)">
						<image src="@/static/imgs/pay02.png" class="payBankImg"></image>
						<view class="name">
							余额
							<view class="greyTxt">可申请提现和购料</view>
						</view>
					</view>
				</view>

				<template v-if="payTypeIndex === 1">
					<view class="bankBox bankBoxMt flex_sb" v-for="(sa, idx) in alipayList" :key="idx">
						<view class="bankBoxLeft flex_j">
							<view class="defaultTag flex_c" v-if="sa.is_default == 1">默认</view>
							{{sa.alipay_number}}
						</view>
						<view class="bankRadio" @tap="radioPayChange(idx)" :class="{'bankRadioActive':payIndex == idx}">
							{{payIndex == idx ? '✓' : ''}}
						</view>
					</view>
				</template>

			<!-- 	<template v-else>
					<template v-if="bankList.length > 0">
						<view class="bankBox bankBoxMt" v-for="(sa, idx) in bankList" :key="idx">
							<view class="flex_sb">
								<view class="bankBoxLeft flex_j">
									<view class="defaultTag flex_c" v-if="sa.is_default == 1">默认</view>
									<view class="bankName">
										{{sa.bank_name||''}} {{' '}} {{sa.card_username||''}}
									</view>
								</view>
								<view class="bankRadio" :class="{'bankRadioActive':payIndex == idx}">{{payIndex == idx ? '✓' : ''}}
								</view>
							</view>
							<view class="accountTxt">{{item.card_number||''}}</view>
						</view>
					</template>
				</template> -->

				<view class="popFloor flex_sb">
					<text @tap="$util.JumpPath(`/pages/new_page/bank/info?playType=${payTypeIndex}`)">添加新账户</text>
					<view class="btn" @tap="confirmFc">确认</view>
				</view>

			</view>
		</uni-popup>
		<hoverBtn v-if="stepIndex == 0 || stepIndex == 1 || stepIndex == 3" :showCart="false" :showPhone="false"></hoverBtn>
	</view>
</template>

<script>
	import {
		getOrderInfo,
		postConfirmSale,
		getAlipayList,
		postConfirmStore
	} from '@/api/new_store.js'
	import {
		card_list
	} from "@/api/new_api.js";
	import hoverBtn from "@/components/hoverBtn/index.vue"
	import ExpressDeliveryTrajectory from './ExpressDeliveryTrajectory.vue'
	export default {
		components: {hoverBtn, ExpressDeliveryTrajectory},
		data() {
			return {
				customBar: this.customBar,
				statusBar: this.statusBar,
				isSticky: false, // 控制模块是否吸顶
				show: false,
				isConfirm: false,
				isTransfer: false,
				olderIdx: 0,
				isFold: false,
				scanNum: '',
				transferNum: '',
				imgUrl: '',
				dynamicInfo: [1, 2, 3],
				stepList: [{
					name: '订单审核',
					status0: '/static/imgs/olderIcon00.png',
					status1: '/static/imgs/olderIcon01.png'
				}, {
					name: '快递邮寄',
					status0: '/static/imgs/olderIcon10.png',
					status1: '/static/imgs/olderIcon11.png'
				}, {
					name: '待签收',
					status0: '/static/imgs/olderIcon20.png',
					status1: '/static/imgs/olderIcon22.png'
				}, {
					name: '确认价格',
					status0: '/static/imgs/olderIcon30.png',
					status1: '/static/imgs/olderIcon33.png'
				}, {
					name: '订单完成',
					status0: '/static/imgs/olderIcon40.png',
					status1: '/static/imgs/olderIcon44.png'
				}],
				stepIndex: 0,
				payTypeIndex: 1,
				payIndex: 0,
				orderInfo: {},
				goods_img: [],
				isExtract: false,
				extract_info: {},
				logistics: [],
				alipayList: [],
				bankList: [],
				opType: 1
			}
		},
		onPageScroll(e) {
			// 判断滚动距离是否超过状态栏高度
			this.isSticky = e.scrollTop > this.customBar ? true : false
		},
		onLoad(option) {
			console.log('option.id', option.id);
			// option.type 1 定价回收
			if (option.type != 1) {
				this.stepList[3].name = '确认入库'
				this.opType = 2
			}
			this._id = option.id
			this.getOrderInfoFcn()
		},
		methods: {
			// 获取订单详情
			getOrderInfoFcn(id) {
				let that = this
				getOrderInfo({
					"order_sn": this._id
				}).then(res => {
					console.log(res.data);
					if (res.status != 200) return
					let obj = res.data.orderInfo
					if (obj.status == 0) {
						that.stepIndex = 0
					} else if (obj.status == 1 || obj.status == 3 || obj.status == 4) {
						that.stepIndex = 1
					} else if (obj.status == 5) {
						that.stepIndex = 3
					} else {
						that.stepIndex = 4
					}
					that.orderInfo = obj
					if(obj.goods_img) {
						this.goods_img = obj.goods_img.split(',')
					}
					
					that.logistics = that.orderInfo.logistics
					if (that.orderInfo.extract_info.length == 0) {
						console.log('that.isExtract', that.isExtract);
						that.isExtract = true
						return
					}
					that.isExtract = false
					that.extract_info = that.orderInfo.extract_info
				})
			},
			// 确认
			confirmFc() {
				if (this.opType == 1) {
					this.sellFc()
				}
			},
			// 入库
			WarehouseFc() {
				let obj = {
					"order_sn": this.orderInfo.order_sn
				}
				postConfirmStore(obj).then(({status, msg}) => {
					if(status == 200) {
						this.$util.Tips({
							title: msg
						})
						this.getOrderInfoFcn()
					}
					
				})
			},
			// 卖出
			sellFc() {
				let obj = {
					"order_sn": this.orderInfo.order_sn,
					"name": '',
					"alipay_number": "",
					"bank_code": "",
					"bank_address": "",
					// "extract": this.payTypeIndex == 0 ? 1 : 2
					"extract": this.payTypeIndex
				}
				// payTypeIndex 1支付宝 0银行卡 2余额
				if (this.payTypeIndex == 1) {
					if (this.alipayList.length < 1) return
					obj.name = this.alipayList[this.payIndex].alipay_name
					obj.alipay_number = this.alipayList[this.payIndex].alipay_number
				} else {
					// if (this.bankList.length < 1) return
					// obj.bank_code = this.bankList[this.payIndex].bank_code
					// obj.bank_address = this.bankList[this.payIndex].bank_address
				}
				// extract(1支付宝打款2银行卡提现)
				postConfirmSale(obj).then(res => {
					console.log(res);
					uni.navigateBack({
						delta: 1
					})
				})
			},
			goMaterial() {
				uni.showModal({
					// title: '提示',
					content: '您正在操作关闭订单，注意致电客户后再关闭订单哦！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 检测弹窗
			open() {
				this.$refs.popup.open('bottom')
			},
			// 选择账户弹窗
			expressOpen() {
				let that = this
				if(this.opType == 1) {
					// 获取支付宝账号列表
					getAlipayList().then(res => {
						that.alipayList = res.data.list
					})
					card_list().then(res => {
						that.bankList = res.data
					})
					this.$refs.expressPopup.open('bottom')
					
				}else {
					uni.showModal({
						title: '确认入库？',
						success: (res)=> {
							if (res.confirm) {
								this.WarehouseFc()
							}
						}
					});
				}
			},
			payTypeChange(index) {
				this.payIndex = 0
				this.payTypeIndex = index
			},
			// 选择账号
			radioPayChange(index) {
				this.payIndex = index
			},
			// 拨打电话
			// callPhone() {
			// 	uni.makePhoneCall({
			// 		phoneNumber: '114' //仅为示例
			// 	});
			// },
			// wxService() {
			// 	uni.openCustomerServiceChat({
			// 		extInfo: {
			// 			url: 'https://work.weixin.qq.com/kfid/kfc6a58d64ae222f4a2'
			// 		},
			// 		corpId: 'wwefb265b5ab9e6efc',
			// 		success(res) {},
			// 		fail(err) {
			// 			uni.showToast({
			// 				title: err.errMsg,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		}
			// 	})
				
			// },
			// 通过相机扫码
			scanCli() {
				let that = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						that.scanNum = res.result
					}
				});
			},
			upImgFc() {
				let that = this
				this.$util.uploadImageOne('upload/image', function(res) {
					that.imgUrl = res.data.url
				});
			},
			imgPreView(url) {
				let imgArr = [url]
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			imgPreViewGoods(index) {
				uni.previewImage({
					urls: this.goods_img,
					current: this.goods_img[index]
				});
			},
			backIcon() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.show = false
			},
			closeIsTransfer() {
				this.isTransfer = false
			},
			closeIsConfirm() {
				this.isConfirm = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.olderDetail {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: #F8F8FA;
		padding-bottom: 200rpx;
		overflow: hidden;
	}

	.headerBox {
		width: 750rpx;
		height: 539rpx;
		background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
	}

	.nav_bar {
		z-index: 99;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		padding: 0 36rpx;
		box-sizing: border-box;

		.left {
			text {
				color: black;
				font-size: 32rpx;
				transform: rotate(180deg);
				display: block;
			}
		}

		.navTiele {
			width: 100%;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 80rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}

		.navTiele::after {
			content: ' ';
			width: 1px;
			height: 1px;
		}

	}

	.nav_bar_bg {
		background: #fff;
	}

	.mt135 {
		margin-top: -335rpx !important;
	}

	.typeBox {
		position: relative;
		width: 700rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		padding: 26rpx 24rpx 26rpx 24rpx;
		margin: 0 auto 18rpx;
		overflow: hidden;

		.title {
			position: relative;
			width: 100%;
			height: 80rpx;
			font-size: 32rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 60rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;
			vertical-align: top;
			padding-left: 10rpx;
			border-bottom: 2rpx solid rgba(246, 246, 246, 1);

			.redPrice {
				position: absolute;
				right: 20rpx;
				bottom: 28rpx;
				height: 41rpx;
				font-size: 28rpx;
				font-weight: 550;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(212, 48, 48, 1);
				text-align: right;
				vertical-align: top;
			}

			.copyBtn {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 90rpx;
				height: 42rpx;
				border-radius: 12rpx;
				background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 42rpx;
				color: rgba(56, 56, 56, 1);
				text-align: center;
				vertical-align: top;
			}
		}

		.title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 16rpx;
			width: 4rpx;
			height: 29rpx;
			background: rgba(242, 208, 150, 1);

		}

		.infoItem {
			display: flex;
			width: 100%;
			margin-top: 20rpx;

			.name {
				flex-shrink: 0;
				width: 180rpx;
				font-size: 28rpx;
				font-weight: 550;
				letter-spacing: 0rpx;
				color: rgba(61, 61, 61, 1);
				text-align: left;
				vertical-align: top;
				// margin-right: 36rpx;
			}

			.num {
				display: flex;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(82, 79, 79, 1);
				text-align: left;
				vertical-align: top;
			}

			.imgList {
				width: 123rpx;
				height: 123rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 10rpx;
			}
		}

		.InfoMain {
			display: flex;
			justify-content: space-between;

			.infoMainBlue {
				width: 308rpx;
				height: 451rpx;
				border-radius: 12rpx;
				background: rgba(42, 130, 228, 0.1);
				overflow: hidden;
			}

			.top {
				width: 308rpx;
				height: 57rpx;
				border-radius: 12rpx 12rpx, 0rpx, 0rpx;
				background: rgba(42, 130, 228, 0.1);
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 57rpx;
				color: rgba(82, 79, 79, 1);
				text-align: center;
				vertical-align: top;
			}

			.item {
				height: 38rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 38rpx;
				color: rgba(61, 61, 61, 1);
				text-align: left;
				vertical-align: top;
				margin: 12rpx 30rpx 0;
			}

			.itemNum {
				margin-left: 20rpx;
			}

			.imgBox {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(82, 79, 79, 1);
				text-align: left;
				vertical-align: top;
				padding-left: 30rpx;

				.pg {
					margin: 10rpx 0;
				}

				.imgList {
					display: inline-block;
					width: 123rpx;
					height: 123rpx;
					border-radius: 12rpx;
					background: url(https://img.js.design/assets/img/66f29e490c8862f00fb41003.png#75c891ca660181adafb7fa62fd5b27f1);
					margin-right: 10rpx;
				}
			}

			.yllBg {
				background: rgb(255, 231, 196);
			}

			.yellowBg {
				background: rgba(248, 243, 232, 1);
			}
		}

		.typeFloor {
			width: 700rpx;
			height: 84rpx;
			border-radius: 0rpx 0rpx, 16rpx, 16rpx;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 84rpx;
			color: rgba(33, 32, 30, 1);
			text-align: right;
			vertical-align: top;
			padding: 0 36rpx;
			margin: 24rpx 0 -26rpx -24rpx;
		}

		.payImg {
			position: absolute;
			right: 38rpx;
			top: 50rpx;
			width: 132rpx;
			height: 115rpx;
		}

	}

	.floor {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		padding: 36rpx 44rpx 60rpx;

		.btn {
			width: 136rpx;
			height: 73rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 73rpx;
			color: rgba(54, 52, 52, 1);
			text-align: center;
			vertical-align: top;
			border-radius: 6rpx;
			background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
			// margin-left: 30rpx;
		}

		.sellBtn {
			width: 494rpx;
			height: 73rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 73rpx;
			color: rgba(54, 52, 52, 1);
			text-align: center;
			border-radius: 6rpx;
			background: linear-gradient(134.64deg, rgba(247, 234, 198, 1) 0%, rgba(226, 192, 148, 1) 100%);
			margin: 0 auto;
		}
	}

	::v-deep.vue-ref {
		z-index: 100000 !important;
		padding: 0 !important;
	}

	.popContent {
		background: #F8F8FA;

		.title {
			width: 100%;
			height: 114rpx;
			font-size: 34rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 114rpx;
			color: black;
			text-align: center;
			vertical-align: top;
		}

		.bankTitle {
			font-size: 28rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: black;
			text-align: left;
			margin-left: 37rpx;
			margin-bottom: 21rpx;
		}

		.bankCard {
			width: 316rpx;
			height: 119rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			padding: 16rpx;
			border: 2rpx solid #fff;

			.payBankImg {
				display: block;
				width: 47rpx;
				height: 47rpx;
				margin-right: 12rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: black;
				text-align: left;
			}

			.greyTxt {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(115, 114, 114, 1);
				text-align: left;
			}
		}

		.bankActive {
			border: 2rpx solid #E2C195;
		}

		.bankBox {
			width: 678rpx;
			min-height: 119rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			margin: 0 auto 16rpx;
			padding: 24rpx 30rpx;

			.bankBoxLeft {
				font-size: 34rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 49.23rpx;
				color: rgba(122, 122, 122, 1);
				text-align: left;
			}

			.bankName {
				font-size: 28rpx;
				font-weight: 550;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(61, 61, 61, 1);
			}

			.defaultTag {
				width: 54rpx;
				height: 35rpx;
				font-size: 22rpx;
				color: rgba(120, 119, 119, 1);
				border-radius: 6rpx;
				background: #EBEBEB;
				margin-right: 8rpx;
			}

			.bankRadio {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 35rpx;
				border: 1rpx solid #7A7A7A;
			}

			.bankRadioActive {
				color: black;
				background: linear-gradient(134.64deg, #F7EAC6 0%, #E2C094 100%);
				border: none;
			}
		}

		.accountTxt {
			font-size: 24rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 34.75rpx;
			color: rgba(117, 117, 117, 1);
			text-align: left;
			margin-top: 16rpx;
		}

		.bankBoxMt {
			margin-top: 28rpx;
		}

		.popFloor {
			width: 750rpx;
			min-height: 126rpx;
			font-size: 28rpx;
			color: rgba(54, 52, 52, 1);
			background: rgba(255, 255, 255, 1);
			border-top: 1rpx solid rgba(237, 237, 237, 1);
			margin-top: 24rpx;
			padding: 20rpx 20rpx 50rpx 36rpx;

			.btn {
				width: 485rpx;
				height: 80rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				text-align: center;
				color: rgba(54, 52, 52, 1);
				background: linear-gradient(134.64deg, #F7EAC6 0%, #E2C094 100%);
				border-radius: 10rpx;
			}
		}
	}

	.iconBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 107rpx;
		height: 107rpx;
		margin-top: 12rpx;
		border-radius: 8rpx;
		background: rgba(248, 248, 250, 1);
		border: 1rpx dashed rgba(0, 0, 0, .1);
	}

	.icon {
		width: 40.25rpx;
		height: 31.63rpx;
	}

	.redTxt {
		color: rgba(212, 48, 48, 1);
	}

	.ml_10 {
		margin-left: 10rpx;
	}

	::v-deep.u-safe-area-inset-bottom {
		padding-bottom: 0 !important;
	}

	.stepBox {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.stepItem {
			position: relative;
			text-align: center;
		}

		.stepRight {
			position: absolute;
			top: 30rpx;
			right: -35rpx;
			font-size: 24rpx;
			color: #E8E8E8;
		}

		.imgBox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin: 0 auto;
			background: rgba(247, 240, 232, 1);
		}

		.imgBoxActive {
			background: rgba(228, 184, 123, 1);
		}

		.stepImg {
			width: 40rpx;
		}

		.stepTxt {
			font-size: 24rpx;
			text-align: center;
			margin-top: 10rpx;
			color: rgba(115, 114, 114, 1);
			&.active {
				color: #000;
			}
		}
	}

	.mb_22 {
		margin-bottom: 22rpx !important;

	}

	.fw_bd {
		font-weight: bold !important;
	}

	.topTips {
		font-size: 28rpx;
		color: rgba(212, 48, 48, 1);
		text-align: center;
		margin: 26rpx auto 26rpx;
	}
</style>